<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>windy</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.css">
  <style>
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }

    .menu {
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      z-index: 2;
    }

    .base-button {
      height: 30px;
      line-height: 30px;
      background: #1b9de8;
      color: #ffffff;
      border-radius: 6px;
      border: 1px solid #bfcbd9;
      padding: 0 10px;
      box-shadow: 0 4px 10px rgba(73, 127, 255, .42);
      transition: .3s;
    }

    .base-button:hover {
      cursor: pointer;
      border-color: #1b9de8;
      color: #ffffff;
    }
  </style>
</head>
<body>
<div id="map">
  <div class="menu">
    <button class="base-button" onclick="getData()">获取数据</button>
    <button class="base-button" onclick="setData()">设置数据</button>
    <button class="base-button" onclick="clearWind()">移除图层</button>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/openlayers/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.js"></script>
<script src="./lib/windLayer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.20.1/moment.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/wind-layer@0.0.6/dist/windLayer.js"></script>-->
">
<script>
  var Maps = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        layerName: 'baseLayer',
        preload: 4,
        source: new ol.source.OSM({
          url: "http://{a-c}.sm.mapstack.stamen.com/" +
          "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
          "{z}/{x}/{y}.png"
        })
      })
    ],
    loadTilesWhileAnimating: true,
    pixelRatio: 1,
    view: new ol.View({
      projection: 'EPSG:3857',
      center: [113.53450137499999, 34.44104525],
      zoom: 5
    })
  });
  var wind, data;
  axios.get('http://127.0.0.1:3333/getdata', {
    params: {
      time: moment.utc().valueOf()
    }
  }).then(function (res) {
    if (res.data.success) {
      data = res.data.data;
      wind = new windLayer.OlWind(data, {
        layerName: 'data',
        ratio: window.devicePixelRatio,
        map: Maps
      });
      wind.appendTo(Maps);
    }
  });

  function getData () {
    var _data = wind.getData();
    console.log(_data)
  }

  function setData () {
    wind.setData(data)
  }

  function clearWind () {
    wind.clearWind()
  }
</script>
</body>
</html>
